<template>
	<view>
		<scroll-view scroll-x="true" style="background: #fff;position: sticky;top: 0;z-index: 9;">
        <view class="nav-list">
          <view class="nav-item" :class="(status == index) ? 'active' : ''" v-for="(item, index) in statusNavList" :key="index" @tap="handleChangeStatusNav(index)">
            {{item}}
            <text class="nav-line"  v-if="status == index"></text>
          </view>
      </view>
		</scroll-view>
    <view style="padding-bottom: 160rpx;margin: 32rpx;">
      <view class="list" v-if="list.length > 0">
        <view v-for="item in list" class="item" :key="item.id">
          <view class="title">
            <view class="time">
              {{ item.create_time }}
            </view>
            <view class="status">{{ statusNavList[item.status] }}</view>
          </view>
          <view class="content">
            <view class="black_bold">{{ item.type_name }}</view>
            <view class="gray_normal">联系人：{{ item.username }}</view>
            <view class="gray_normal">手机号：{{ item.mobile }}</view>
            <view class="gray_normal">联系地址：{{ item.address }}</view>
            <view class="gray_normal">备注：{{ item.remark }}</view>
          </view>
          <view class="footer">
            <view class="footer_btn gray_btn" @click="cancel(item)" v-if="item.status === 0">取消申请</view>
            <view class="footer_btn blue_btn" @click="tsigns(item)"v-if="item.status === 1">签署合同</view>
            <view class="footer_btn blue_btn" @click="lookContract(item.id)" v-if="item.status === 2||item.status === 3">查看合同</view>
          </view>
        </view>
      </view>
      <view class="no-data-box" v-else>
        <image src="https://taxi.raxan.xyz/wechat/static/images/empty.png" class="no-data-img" />
        <view class="text">暂无数据</view>
      </view>
    </view>
    <view class="btn" @click="sublease">转租申请</view>
  </view>
</template>

<script>
	import { subleaseList, cancelApply } from '@/api/hire.js';
    
	export default{
		data(){
			return{
				list:[],
        status: 0,
				isloading: false,
        curNavIndex: 0,
        statusNavList: [
          '待审核',
          '待签订',
          '已签订',
          '合同待审核'
        ]
			};
		},
		onReachBottom(){
			uni.showLoading({title:'正在加载'});
			this.getList();
		},
		onShow() {
      this.status = 0;
      this.subleaseList();
		},
		methods:{
      cancel(data) {
        uni.showModal({
          title: '提示',
          content: '确认要删除吗？',
          success: (res) => {
            if (res.confirm) {
                this.cancelApply({
                  id: data.id
                })
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
          }
        });
      },
      // 查看合同
      lookContract(orderId){
        uni.navigateTo({
        	url:'/pages/car_sub/look_contract/index?order_id=' + orderId + '&type=2'
        })
      },
      tsigns(data) {
        // sigin_type = type
         uni.navigateTo({ url: `/pages/hire_sub/sublease/chooseRoles?id=${data.id}&order_id=${data.id}&type=0` })
      },
      sublease() {
        uni.navigateTo({ url: '/pages/hire_sub/sublease/apply' })
      },
      subleaseList() {
        this.checkLoading(() => subleaseList(this.status).then(res => {
          this.list = res.data;
        }))
      },
      cancelApply(data) {
        this.checkLoading(() => cancelApply(data).then(res => {
          this.handleChangeStatusNav(0);
        }))
      },
      checkLoading(fn) {
        this.loading = true;
        uni.showLoading({ title: '加载中' })
        fn().finally(() => {
          this.loading = false;
          uni.hideLoading()
        })
      },
      handleChangeStatusNav(status){
        this.status = status
        this.subleaseList();
      }
		},
	}
</script>

<style scoped lang="scss">
.nav-list{
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid  #E7E7E7;
  .nav-item{
    position: relative;
    flex: 1;
    text-align: center;
    padding: 26rpx 0;
    font-size: 28rpx;
    color: rgba(0,0,0,0.9);
    &.active{
      color: #008DFF;
    }
    .nav-line{
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 32rpx;
      height: 6rpx;
      background: #008DFF;
      border-radius: 32rpx;
    }
  }
}

.list{
  .item {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 0 32rpx;
    .title {
      box-sizing: border-box;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #E7E7E7;
      .time {
        position: relative;
        padding-left: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0,0,0,0.6);
        line-height: 33rpx;
        &::before {
          content: ' ';
          position: absolute;
          display: inline-block;
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;
          background-color: #008DFF;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }
      }
      .status {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #008DFF;
        line-height: 44rpx;
      }
    }
    .content {
      padding: 24rpx 0;
      border-bottom: 1rpx solid #E7E7E7;
      .black_bold {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #333333;
        line-height: 38rpx;
        text-align: left;
        margin-bottom: 24rpx;
      }
      .gray_normal {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
        line-height: 30rpx;
        text-align: left;
        margin-bottom: 24rpx;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .footer {
      padding: 24rpx 0 32rpx 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .footer_btn {
        line-height: 72rpx;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        padding: 0 32rpx;
        font-weight: 500;
        font-size: 24rpx;
      }
      .gray_btn {
        background: #F8F9FC;
        color: rgba(0,0,0,0.9);
      }
      .blue_btn {
        background-color: #008DFF;
        color: #FFFFFF;
      }
    }
  }
}
.no-data-box{
    .no-data-img{
      width: 360rpx;
      height: 360rpx;
      display: block;
      margin: 200rpx auto 10rpx;
    }
    .text{
      text-align: center;
      font-size: 26rpx;
      color: #B9B9BD;
    }
}

.btn {
  line-height: 96rpx;
  color: #F8F9FC;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  background-color: #008DFF;
  border-radius: 12rpx;
  position: fixed;
  left: 32rpx;
  right: 32rpx;
  bottom: 32rpx;
  z-index: 10;
}
</style>